<template>
  <div>
    <div class="page">
      <article class="container">
        <header class="header">
          <section class="headtop">
            <section class="htsearch">
              <a href="#">
                <i class="hl iconfont icon-zuojiantou"></i>
              </a>
              <form action="#">
                <input type="search" placeholder="按内容搜索"
               v-model="searchcontent"
                @keydown.enter="enter()"
                
                 />
                <!-- <input type="submit" value="" > -->
                <i class="hsr iconfont icon-sousuo"></i>
              </form>
            </section>
            <section class="navbar">
              <ul>
                <li class="navactive">
                  <a href="#">综合推荐</a>
                </li>
                <li><a>销量</a></li>
                <li class="mooy">
                  <a>价格</a>
                  <i class="moy iconfont icon-shangxia"></i>
                </li>
                <li><a>好评度</a></li>
              </ul>
              <div class="fen iconfont icon-shaixuan">筛选</div>
            </section>
          </section>
        </header>
        <article class="inner5">
          <section class="screen">
            <a href="#">筛选11.11大促商品</a>
          </section>
          <section class="list_content">
            <ul>
              <li
                v-for="item in goodsList"
                :key="item.id"
                @click="goGoodInfo(item.id)"
              >
                <a href="#">
                  <div class="listleft">
                    <img :src="$pre + item.img" alt="" />
                  </div>
                  <div class="listright">
                    <p class="mo">{{ item.goodsname }}</p>
                    <p class="mo">敏感肌可用，控油祛痘、男女可适用</p>
                    <p>999条评论 &nbsp;89.9%好评</p>
                    <p>
                      <span>
                        <span> &yen;{{ item.price }} </span>
                        <span
                          >&yen;<del>{{ item.market_price }}</del></span
                        >
                      </span>

                      <span>9519人已付款</span>
                    </p>
                  </div>
                </a>
              </li>
            </ul>
          </section>
        </article>
      </article>
    </div>
  </div>
</template>
<script>
import { search,getgoodlist} from "../../request/api.js";
export default {
  data() {
    return {
      goodsList: [],
      searchcontent: "",
    };
  },
  methods: {
    goGoodInfo(id) {
      this.$router.push("/productDetails?id=" + id);
    },
    enter() {
      search({
        keywords: this.searchcontent,
      }).then((res) => {
        this.goodsList = res.data.list;
      });
    }
  },
  components: {},
  mounted() {
    if (this.$route.query.searchcontent) {
      this.searchcontent = this.$route.query.searchcontent;
      search({ keywords: this.$route.query.searchcontent }).then((res) => {
        this.goodsList = res.data.list;
      });
    } else {
      getgoodlist({
        cateid: this.$route.query.id,
        type: 2,
      }).then(res=>{
           this.goodsList = res.data.list.goodData
      })
    }
  },
  destroyed() {},
};
</script>
<style scoped>
@import url(../../assets/css/public.css);
@import url(../../assets/css/product_list.css);
.htsearch input {
  font-size: 0.5rem;
}
.htsearch .hsr {
  font-size: 0.4rem;
}
</style>